<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Row Editing in DataGrid - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="./jquery-easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="./jquery-easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="./jquery-easyui/themes/color.css">
    <link rel="stylesheet" type="text/css" href="./jquery-easyui/demo.css">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <script type="text/javascript" src="./jquery-easyui/js/jquery.min.js"></script>
    <script type="text/javascript" src="./jquery-easyui/js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="./js/common/common.js"></script>
    <script type="text/javascript" src="./js/common/url.js"></script>
    <script type="text/javascript" src="./js/common/loader.js"></script>
    <script type="text/javascript">
    var url;
    var editIndex = undefined;
    var rows = [];
    var maxJe = 0;
    var deptId=localStorage.deptId;
    // var deptId='006';


    function doSearch() {
        $('#dg').datagrid('load', {
            stuId: $('#stuId').val(), //用户名
            name: $('#name').val(), //用户名
            bankName: $('#bankName').val(),
            deptId: deptId
        });
    }

    function getJe() {
        $.ajax({
            type: 'post',
            url: 'http://115.29.136.190:8080/help/mgr/je/get.do',
            contentType: "application/json; charset=utf-8",
            // data: JSON.stringify(query),
            dataType: 'json',
            success: function(data) {
                if (data.status == 1) {
                    maxJe = data.body.je;
                    console.log(data.body) // used the data.rows array to fill 
                } else {
                    success(data);
                }
            },
            error: function() {
                error.apply(this, arguments);
            }
        });
    }


    function setHelpDate(n) {
        var rows = $('#dg').datagrid("getRows");
        $.each(rows, function(i, val) {
                val.helpDate = n;

            })
            // console.log(rows)
    }

    function validateJe(money) {
        if (money > maxJe) {
            alert('金额数目不得大于' + maxJe)
            return false
        }

    }

    function endEditing() {
        if (editIndex == undefined) {
            return true
        }
        if ($('#dg').datagrid('validateRow', editIndex)) {
            // editIndex
            var ed = $('#dg').datagrid('getEditor', {
                index: editIndex,
                field: 'money'
            });
            $(ed.target).disabled = true;
            console.log(ed);
            console.log(editIndex);
            console.log($(ed.target))
            var row = $('#dg').datagrid('getRows')[editIndex];
            // if (!validateJe(row.money)) {
            //     return false
            // };

            if (rows.length == 0) {
                rows.push(row)
            } else {
                var newitem = 1;
                $.each(rows, function(i, val) {
                    console.log(val)
                    if (val.id == row.id) {
                        //如果找到相同id，说明是旧的
                        console.log('olditem')
                        val.money = row.money;
                        val.helpDate = row.helpDate;
                        val.remark = row.remark;
                        // val.money = row.money;
                        newitem = 0;
                    }
                })
                if (newitem == 1) {
                    row.type = 1;
                    rows.push(row)

                }
            }

            $('#dg').datagrid('endEdit', editIndex);
            // console.log(row)
            editIndex = undefined;
            return true;
        } else {
            return false;
        }
    }

    function onClickRow(index) {
        if (editIndex != index) {
            if (endEditing()) {
                $('#dg').datagrid('selectRow', index)
                    .datagrid('beginEdit', index);
                editIndex = index;
            } else {
                $('#dg').datagrid('selectRow', editIndex);
            }
        }
    }

    function accept() {
        if (endEditing()) {
            $('#dg').datagrid('acceptChanges');
        }
        console.log(rows)
        $.each(rows, function(i, val) {
            addBuzhu(val);
        });
        // $('#tt').datagrid('reload'); // reload the user data
        rows = [];
    }

    function addBuzhu(query) {
        query.type = 1;
        console.log(JSON.stringify(query))
        $.ajax({
            type: "POST",
            url: buzhu_url.addBuzhu_without,
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(query),
            dataType: "json",
            xhrFields: {
                withCredentials: true
            },
            crossDomain: true,
            success: function(data) {
                console.log(data);
                $('#tt').datagrid('reload');
            }
        })
    }

    function reject() {
        $('#dg').datagrid('rejectChanges');
        rows = [];
        editIndex = undefined;
    }

    function getChanges() {
        var rows = $('#dg').datagrid('getChanges');
        alert(rows.length + ' rows are changed!');
    }

    function submit() {
        // 提交已添加的数据
        var rows = $('#tt').datagrid('getSelections');
        var ids = '';
        $.each(rows, function(i, val) {
            console.log(val)
            ids = val.id + ',' + ids
        })
        console.log(ids);
        var newUrl = buzhu_url.submit + '?' + 'buzhuList=' + ids;
        $.ajax({
            type: "POST",
            url: newUrl,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            xhrFields: {
                withCredentials: true
            },
            crossDomain: true,
            success: function(data) {
                if (data.status == 1) {
                    $.messager.show({ // show error message
                        title: 'success',
                        msg: data.message
                    });
                    $('#tt').datagrid('reload'); // reload the user data

                } else {
                    $.messager.show({ // show error message
                        title: 'Error',
                        msg: data.message
                    });
                }
            }
        })
    }
    $(function() {
        $('#tt').datagrid({
            title: '已提交信息查看',
            iconCls: 'icon-edit',
            width: "100%",
            height: "auto",
            // fit: true,  
            singleSelect: false,
            idField: 'id',
            url: buzhu_url.queryBuZhu,
            pagination: true,
            pageSize: 5,
            pageList: [5, 10, 15, 20],
            method: 'post',
            queryParams: {
                deptId: deptId,
                type: 1,
                statusCode: 0
            },
            columns: [
                [{
                    field: 'stuId',
                    title: '学号',
                    align: 'center',
                    width: "15%"
                }, {
                    field: 'studentName',
                    title: '姓名',
                    align: 'center',
                    width: "12%"
                }, {
                    field: 'deptName',
                    title: '所在学院/部门名称',
                    width: "12%",
                    align: 'center',
                }, {
                    field: 'bankName',
                    title: '银行',
                    width: "7%",
                    align: 'center',
                }, {
                    field: 'bankNo',
                    title: '银行卡号',
                    width: "12%",
                    align: 'center',
                }, {
                    field: 'helpDate',
                    title: '申请年月',
                    align: 'center',
                    width: "12%"
                }, {
                    field: 'money',
                    title: '金额',
                    align: 'center',
                    width: "5%"
                }, {
                    field: 'remark',
                    title: '备注',
                    align: 'center',
                    width: "12%"
                }, {
                    field: 'statusCodeName',
                    title: '状态',
                    width: "12%",
                    align: 'center',
                }]
            ],
            toolbar: '#toolbar'
        });
        getJe();
        $('#cc').combobox({
            url: url_queryDate,
            valueField: 'helpDate',
            textField: 'helpDate',
            method: 'get',
            multiple: false,
            loader: dateloader,
            panelHeight: 'auto',
            // onChange: function(n, o) {
            //     setHelpDate(n)
            // }
        });
    });
    </script>
</head>

<body>
    <table id="dg" class="easyui-datagrid" title="Row Editing in DataGrid" style="width:100%;height:auto" data-options="
                iconCls: 'icon-edit',
                title: '申请补助信息',
                singleSelect: true,
                toolbar: '#tb',
                url: url_queryZhuguan,
                queryParams: {
                deptId: deptId},
                method: 'post',
                onClickRow: onClickRow,
                pagination: true,
                pageSize: 5,
                pageList: [5, 10, 15, 20],
            ">
        <thead>
            <tr>
                <!-- <th data-options="field:'checkbox',width:'5%',align:'center',editor:{type:'checkbox',options:{on:'P',off:''}}">选择</th> -->
                <th data-options="field:'stuId',width:'15%',align:'center'">学号</th>
                <th data-options="field:'name',width:'10%',align:'center'">姓名</th>
                <th data-options="field:'deptName',width:'20%',align:'center'">学院/部门名称</th>
                <th data-options="field:'bankName',width:'10%',align:'center'">银行名称</th>
                <th data-options="field:'bankNo',width:'15%',align:'center'">银行卡号</th>
                <th data-options="field:'helpDate',width:'15%',editor:{type:'numberbox',options:{required:true}} ">申请日期(格式:201609)</th>
                <th data-options="field:'money',width:'5%',editor:{type:'numberbox',options:{required:true}}">金额</th>
                <th data-options="field:'remark',width:'10%',editor:{type:'textbox',options:{required:true}} ">备注</th>
            </tr>
        </thead>
    </table>
    <div id="tb" style="height:auto">
        <div id="ts" style="padding:3px">
            <span>学号:</span>
            <input id="stuId" style="line-height:26px;border:1px solid #ccc">
            <span>姓名:</span>
            <input id="name" style="line-height:26px;border:1px solid #ccc">
            <span>银行:</span>
            <input id="bankName" style="line-height:26px;border:1px solid #ccc">
            <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-search" onclick="doSearch()">Search</a>
        </div>
        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="accept()">提交</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" onclick="reject()">取消</a>
        <!-- <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true" onclick="getChanges()">GetChanges</a> -->
    </div>
    <!-- <table id="tt"></table> -->
    <div style="margin-top: 10px;padding-top: 10px">
        <table id="tt"></table>
        <div id="toolbar" style="height:auto">
            <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="submit()">提交</a>
        </div>
    </div>
</body>

</html>
